<template>
	<view class="serverrecharge_wp">
		<view class="s_list">
			<view class="s_l_title">充值金额</view>
			<view class="s_l_items">
				<view class="s_l_item">
					<view>￥100.00</view>
					<view><text>到账￥</text>110.00</view>
				</view>
				<view class="s_l_item">
					<view>￥100.00</view>
					<view><text>到账￥</text>110.00</view>
				</view>
				<view class="s_l_item">
					<view>￥100.00</view>
					<view><text>到账￥</text>110.00</view>
				</view>
				<view class="s_l_item">
					<view>￥100.00</view>
					<view><text>到账￥</text>2800.00</view>
				</view>
			</view>
		</view>

		<view class="s_pay">
			<view class="s_p_title">支付方式</view>
			<radio-group @change="radioChange">
				<label class="s_p_item">
					<view class="s_p_name">
						<image src="/static/user/weixin.png" ></image>
						<text>微信</text>
					</view>
					<view>
						<radio color="#8405dc" value="1" :checked="status==1" />
					</view>
				</label>
				<label class="s_p_item">
					<view class="s_p_name">
						<image src="/static/user/zhifubao.png" ></image>
						<text>支付宝</text>
					</view>
					<view>
						<radio color="#8405dc" value="2" :checked="status==2" />
					</view>
				</label>
			</radio-group>
		</view>

		<view class="s_sumbit" @click="onsubmit">充值</view>

	</view>
</template>

<script>
	export default {
		name: 'serverrecharge',
		data() {
			return {
				status: 1,
			}
		},
		methods: {
			onsubmit() {
				this.$navBack();
			},
			radioChange(e) {
				this.status = e.detail.value;
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f2f2f2;
		padding-bottom: 130upx;
		color: $font-color-dark;
	}

	.serverrecharge_wp {
		border-top: 1px hsl(0, 0%, 87%) solid;
	}

	.s_list {
		background-color: #fff;
	}

	.s_l_title {
		padding: 20upx;
		font-weight: bold;
	}

	.s_l_items {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.s_l_item {
		background-color: rgba(250, 67, 106, 0.5);
		border-radius: 10upx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-bottom: 20px;
		height: 170upx;
		width: 170upx;
	}

	.s_l_item view:nth-of-type(1) {
		color: $base-color;
		font-size: $font-base;
		padding-bottom: 10upx;
	}

	.s_l_item view:nth-of-type(2) {
		color: $font-color-base;
	}

	.s_l_item text {
		font-size: 22upx;
	}

	.s_pay {
		background-color: #fff;
		margin-top: 20upx;
		padding: 20upx;
	}

	.s_p_title {
		font-weight: bold;
	}

	.s_p_item,
	.s_p_name {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.s_p_name {
		justify-content: space-around;
		width: 150upx;
		padding: 20upx 0;
	}

	.s_p_item image {
		border-radius: 8upx;
		height: 50upx;
		width: 50upx;
	}

	.s_sumbit {
		background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);
		border-radius: 40upx;
		color: #fff;
		font-size: $font-base;
		line-height: 80upx;
		margin: 60upx auto 0;
		text-align: center;
		letter-spacing: 2px;
		width: 92%;
	}
</style>
